<script lang="ts" setup>
import type { Category } from '@/types/category'
import { ref, computed } from 'vue'
import { getCategories } from '@/api/category'
import { useTabBarTitle } from '@/hooks'
useTabBarTitle(1, '大分类', '分类')

const currentIndex = ref(0)
const categoryList = ref<Category[]>([])

const getCategoryListData = async () => {
  const res = await getCategories()

  categoryList.value = res.data
}

// 获取一级分类下的二三级分类
const level2List = computed(
  () =>
    // categoryList.value[currentIndex.value] &&
    // categoryList.value[currentIndex.value].children
    categoryList.value[currentIndex.value]?.children
)

getCategoryListData()
</script>

<template>
  <view class="scroll-view-container">
    <!-- 左边的一级分类 -->
    <scroll-view class="left-scroll-view" scroll-y>
      <!-- https://v2.cn.vuejs.org/v2/guide/class-and-style.html -->
      <!-- <view
        :class="[
          'left-scroll-view-item',
          currentIndex === index ? 'active' : ''
        ]"
        v-for="(item, index) in categoryList"
        :key="item.cat_id"
        @click="currentIndex = index"
      > -->
      <view
        :class="{
          'left-scroll-view-item': true,
          active: currentIndex === index
        }"
        v-for="(item, index) in categoryList"
        :key="item.cat_id"
        @click="currentIndex = index"
      >
        {{ item.cat_name }}
      </view>
    </scroll-view>
    <!-- 右边的二三级 -->
    <scroll-view class="right-scroll-view" scroll-y>
      <view v-for="item in level2List" :key="item.cat_id">
        <text class="cate-lv2-title">{{ item.cat_name }}</text>
        <!-- 二级下的三级分类 -->
        <view class="cate-lv3-list">
          <view
            class="cate-lv3-item"
            v-for="subitem in item.children"
            :key="subitem.cat_id"
          >
            <image :src="subitem.cat_icon" />
            <text class="name">{{ subitem.cat_name }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.scroll-view-container {
  display: flex;
  height: 100%;

  .left-scroll-view {
    width: 120px;
    height: 100vh;
    overflow: auto;

    .left-scroll-view-item {
      line-height: 60px;
      background-color: #f7f7f7;
      text-align: center;
      font-size: 12px;

      // 激活项的样式
      &.active {
        background-color: #ffffff;
        position: relative;
        color: #c00000;
      }
    }
  }

  // 去除滚动条
  .left-scroll-view::-webkit-scrollbar {
    width: 0 !important;
  }

  .right-scroll-view {
    height: 100vh;
    overflow: auto;
    flex: 1;
    .cate-lv2-title {
      font-size: 12px;
      font-weight: bold;
      padding: 0 15px;
    }
    .cate-lv3-list {
      display: flex;
      flex-wrap: wrap;

      .cate-lv3-item {
        width: 33.33%;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;

        image {
          width: 120rpx;
          height: 120rpx;
        }

        .name {
          font-size: 12px;
          color: gray;
        }
      }
    }
  }

  // 去除滚动条
  .right-scroll-view::-webkit-scrollbar {
    width: 0 !important;
  }
}
</style>
